<?php
use lvzmen\yii\cms\widgets\markdown\Markdown;
use lvzmen\yii\cms\widgets\markdown\Example;
use yii\bootstrap\Carousel;
use yii\bootstrap\Button;

$html = [
    "markdown0" => <<<M0
## 轮播图
`Carousel`的小部件做的并不好，缺少拿来即用的优美效果，下面展示的是对其修改后的效果：
M0,
    "example0" => [
        "html" =>
            Carousel::widget([
                'id' => 'mycarousel',
                'options' => ["class" => 'slide'],
                'controls' => [
                    '<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>',
                    '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>'
                ],
                'items' => [
                    // the item contains only the image
                    '<img src="/upload/articles/images/carousel1.jpeg"/>',
                    '<img src="/upload/articles/images/carousel2.jpeg"/>',
                    '<img src="/upload/articles/images/carousel3.jpeg"/>',
                    '<img src="/upload/articles/images/carousel4.jpeg"/>',
                ]
            ])
        ,
        "yii" => <<<EY0
use yii\bootstrap\Carousel;
echo Carousel::widget([
    'id' => 'mycarousel',
    'options' => ["class" => 'slide'],
    'controls' => [
        '<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>',
        '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>'
    ],
    'items' => [
        // the item contains only the image
        '<img src="/upload/articles/images/carousel1.jpeg"/>',
        '<img src="/upload/articles/images/carousel2.jpeg"/>',
        '<img src="/upload/articles/images/carousel3.jpeg"/>',
        '<img src="/upload/articles/images/carousel4.jpeg"/>',
    ]
]);
EY0,
        "bootstrap" => <<<EB0
<div id="mycarousel" class="slide carousel">
    <ol class="carousel-indicators">
        <li class="" data-target="#mycarousel" data-slide-to="0"></li>
        <li data-target="#mycarousel" data-slide-to="1" class=""></li>
        <li data-target="#mycarousel" data-slide-to="2" class="active"></li>
        <li data-target="#mycarousel" data-slide-to="3" class=""></li>
    </ol>
    <div class="carousel-inner">
        <div class="item">
            <img src="/upload/articles/images/carousel1.jpeg">
        </div>
        <div class="item">
            <img src="/upload/articles/images/carousel2.jpeg">
        </div>
        <div class="item active">
            <img src="/upload/articles/images/carousel3.jpeg">
        </div>
        <div class="item">
            <img src="/upload/articles/images/carousel4.jpeg">
        </div></div>
    <a class="left carousel-control" href="#mycarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#mycarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
EB0
    ],
    "markdown1" => <<<M0
> 注意：上述代码较默认的`Carousel`小部件样式输出，有如下不同：
- 加入了`.slide`滑动效果，默认的小部件是没有加的，会很突兀地切换图片；
- 默认的左右切换按钮只是`>`和`<`，因此很丑；
- 加入了`id`属性，是因为默认创建的`id`有可能会和别的小部件创建的`id`冲突，导致滑动操作失效；  

下面展示一下它默认输出的效果：
M0
    ,

    "example1" => [
        "html" =>
            Carousel::widget([
                'id' => 'myCarouselOriginal',
                'items' => [
                    // the item contains only the image
                    '<img src="/upload/articles/images/carousel1.jpeg"/>',
                    '<img src="/upload/articles/images/carousel2.jpeg"/>',
                    '<img src="/upload/articles/images/carousel3.jpeg"/>',
                    '<img src="/upload/articles/images/carousel4.jpeg"/>',
                ]
            ])
        ,
        "yii" => <<<EY1
use yii\bootstrap\Carousel;
echo Carousel::widget([
    'items' => [
        // the item contains only the image
        '<img src="/upload/articles/images/carousel1.jpeg"/>',
        '<img src="/upload/articles/images/carousel2.jpeg"/>',
        '<img src="/upload/articles/images/carousel3.jpeg"/>',
        '<img src="/upload/articles/images/carousel4.jpeg"/>',
    ]
]);
EY1,
        "bootstrap" => <<<EB1
<div id="myCarouselOriginal" class="carousel">
    <ol class="carousel-indicators">
        <li class="" data-target="#myCarouselOriginal" data-slide-to="0"></li>
        <li data-target="#myCarouselOriginal" data-slide-to="1" class=""></li>
        <li data-target="#myCarouselOriginal" data-slide-to="2" class="active"></li>
        <li data-target="#myCarouselOriginal" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item">
            <img src="/upload/articles/images/carousel1.jpeg">
        </div>
        <div class="item">
            <img src="/upload/articles/images/carousel2.jpeg">
        </div>
        <div class="item active">
            <img src="/upload/articles/images/carousel3.jpeg">
        </div>
        <div class="item">
            <img src="/upload/articles/images/carousel4.jpeg">
        </div>
    </div>
    <a class="left carousel-control" href="#myCarouselOriginal" data-slide="prev">‹</a>
    <a class="right carousel-control" href="#myCarouselOriginal" data-slide="next">›</a>
</div>
EB1

    ],
    "markdown2" => <<<EM2
怎么样，是不是很丑，那个`<`和`>`符号直接彪到最上面去了，而且太小，不认真看还找不到。
EM2
    ,
    "markdown3" => <<<M3
## Widget Api
### 父类及继承关系
![button group](/upload/articles/images/20210915172650.png)
### 属性
- `controls`: array/false  
轮播图的左右切换按钮，如果是false的话就不展示按钮，你也可以自己定制按钮，比如说使用`bootstrap`的图标库：
```php
echo Carousel::widget([
    ...
    'controls' => [
        '<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>',
        '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>'
    ],
    ...
]);
```
- `showIndicators`: bool  
用于控制底部的小圆圈的显示，如果`true`的话就显示，否则不显示。
- `items`: array  
图片列表，举例如下：
```php
'items' => [
    // the item contains only the image
    '<img src="..."/>',
    // equivalent to the above
    ['content' => '<img src="..."/>'],
    // the item contains both the image and the caption
    [
        'content' => '<img src="..."/>'
        'caption' => '<h4>This is title</h4><p>This is the caption text</p>',
        'options' => ['class' => ''],
    ],
]
```
M3
];

foreach($html as $name => $item){
    switch ($name) {
        case strpos($name, "example") !== false:
            echo Example::widget($item);
            break;
        case strpos($name, "markdown") !== false:
            echo Markdown::widget(["content" => $item]);
            break;
        default:
            break;
    }
}